<template>
  <div class="page-container-padding">
    <div class="content">
      <div class="file-item">
        <div class="title">
          <span>1、技术解盘</span>
        </div>
        <el-date-picker
          v-model="file1Date"
          class="date-input"
          size="mini"
          :clearable="false"
        ></el-date-picker>
        <el-upload
          drag
          action="''"
          accept=".docx"
          auto-upload
          :multiple="false"
          :http-request="file1Upload"
          :file-list="file1List"
          :show-file-list="false"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>上传技术解盘</em>
          </div>
        </el-upload>
        <div class="table-title">
          <div>文件列表</div>
          <el-pagination
            layout="prev, pager, next"
            size="mini"
            style="margin-left: auto"
            :total="file1Table.totalCount"
            :page-size="file1Table.pageSize"
            @current-change="(p) => file1PageChange(p, 1)"
          />
        </div>
        <el-table
          v-loading="file1Table.loading"
          border
          stripe
          :data="file1Table.data"
        >
          <el-table-column prop="file_date" label="日期" width="110" />
          <el-table-column prop="name" label="文件名" show-overflow-tooltip />
          <el-table-column label="下载" width="60" align="center">
            <template #default="scope">
              <vab-icon
                style="cursor: pointer"
                :icon="['fas', 'download']"
                @click="toDownloadAnnex(scope.row)"
              ></vab-icon>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="file-item">
        <div class="title">
          <span>2、资金流向</span>
        </div>
        <el-date-picker
          v-model="file2Date"
          class="date-input"
          size="mini"
          :clearable="false"
        ></el-date-picker>
        <el-upload
          drag
          action="''"
          accept=".docx"
          auto-upload
          :multiple="false"
          :http-request="file2Upload"
          :file-list="file2List"
          :show-file-list="false"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>上传资金流向</em>
          </div>
        </el-upload>
        <div class="table-title">
          <div>文件列表</div>
          <el-pagination
            layout="prev, pager, next"
            size="mini"
            style="margin-left: auto"
            :total="file2Table.totalCount"
            :page-size="file2Table.pageSize"
            @current-change="(p) => file2PageChange(p, 2)"
          />
        </div>
        <el-table
          v-loading="file2Table.loading"
          border
          stripe
          :data="file2Table.data"
        >
          <el-table-column prop="file_date" label="日期" width="110" />
          <el-table-column prop="name" label="文件名" show-overflow-tooltip />
          <el-table-column label="下载" width="60" align="center">
            <template #default="scope">
              <vab-icon
                style="cursor: pointer"
                :icon="['fas', 'download']"
                @click="toDownloadAnnex(scope.row)"
              ></vab-icon>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="file-item">
        <div class="title">
          <span>3、持仓分析</span>
        </div>
        <el-date-picker
          v-model="file3Date"
          class="date-input"
          size="mini"
          :clearable="false"
        ></el-date-picker>
        <el-upload
          drag
          action="''"
          accept=".docx"
          auto-upload
          :multiple="false"
          :http-request="file3Upload"
          :file-list="file3List"
          :show-file-list="false"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>上传持仓分析</em>
          </div>
        </el-upload>
        <div class="table-title">
          <div>文件列表</div>
          <el-pagination
            layout="prev, pager, next"
            size="mini"
            style="margin-left: auto"
            :total="file3Table.totalCount"
            :page-size="file3Table.pageSize"
            @current-change="(p) => file3PageChange(p, 3)"
          />
        </div>
        <el-table
          v-loading="file3Table.loading"
          border
          stripe
          :data="file3Table.data"
        >
          <el-table-column prop="file_date" label="日期" width="110" />
          <el-table-column prop="name" label="文件名" show-overflow-tooltip />
          <el-table-column label="下载" width="60" align="center">
            <template #default="scope">
              <vab-icon
                style="cursor: pointer"
                :icon="['fas', 'download']"
                @click="toDownloadAnnex(scope.row)"
              ></vab-icon>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
  import { uploadWorkFile, getWorkFile } from '@/api/departmentWork/workFile'
  import { datetimeToStr } from '@/utils/datetimeUtils'
  import { GetBlob } from '@/utils/dataUtils'
  export default {
    data() {
      return {
        file1Date: new Date(),
        file1List: [],
        file1Table: {
          data: [],
          loading: false,
          page: 1,
          pageSize: 15,
          totalCount: 0,
        },
        file2Date: new Date(),
        file2List: [],
        file2Table: {
          data: [],
          loading: false,
          page: 1,
          pageSize: 15,
          totalCount: 0,
        },
        file3Date: new Date(),
        file3List: [],
        file3Table: {
          data: [],
          loading: false,
          page: 1,
          pageSize: 15,
          totalCount: 0,
        },
      }
    },
    mounted() {
      this.queryFileList(1, 1, 15)
      this.queryFileList(2, 1, 15)
      this.queryFileList(3, 1, 15)
    },
    methods: {
      file1Upload(param) {
        // 文件是param.file
        const fileDate = datetimeToStr(this.file1Date, true, '-')
        let formData = new FormData()
        formData.append('file', param.file)
        formData.append('file_type', 1)
        formData.append('file_date', fileDate)
        uploadWorkFile(formData).then((res) => {
          this.$baseMessage(res.msg, 'success')
          this.queryFileList(1, this.file1Table.page, this.file1Table.pageSize)
        })
      },
      file2Upload(param) {
        const fileDate = datetimeToStr(this.file2Date, true, '-')
        let formData = new FormData()
        formData.append('file', param.file)
        formData.append('file_type', 2)
        formData.append('file_date', fileDate)
        uploadWorkFile(formData).then((res) => {
          this.$baseMessage(res.msg, 'success')
          this.queryFileList(2, this.file2Table.page, this.file2Table.pageSize)
        })
      },
      file3Upload(param) {
        const fileDate = datetimeToStr(this.file2Date, true, '-')
        let formData = new FormData()
        formData.append('file', param.file)
        formData.append('file_type', 3)
        formData.append('file_date', fileDate)
        uploadWorkFile(formData).then((res) => {
          this.$baseMessage(res.msg, 'success')
          this.queryFileList(3, this.file3Table.page, this.file3Table.pageSize)
        })
      },

      queryFileList(fileType, page, page_size) {
        if (fileType === 1) {
          this.file1Table.loading = true
        } else if (fileType === 2) {
          this.file2Table.loading = true
        } else if (fileType === 3) {
          this.file3Table.loading = true
        }
        getWorkFile(fileType, page, page_size).then((res) => {
          if (fileType === 1) {
            this.file1Table.loading = false
            this.file1Table.data = res.data.data
            this.file1Table.totalCount = res.data.total_count
          } else if (fileType === 2) {
            this.file2Table.loading = false
            this.file2Table.data = res.data.data
            this.file2Table.totalCount = res.data.total_count
          } else if (fileType === 3) {
            this.file3Table.loading = false
            this.file3Table.data = res.data.data
            this.file3Table.totalCount = res.data.total_count
          }
        })
      },

      toDownloadAnnex(row) {
        GetBlob(row.file_addr).then((blob) => {
          let a = document.createElement('a')
          a.href = window.URL.createObjectURL(blob)
          a.target = '_blank'
          a.download = row.name
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        })
      },

      file1PageChange(p, ft) {
        this.file1Table.page = p
        this.queryFileList(ft, this.file1Table.page, this.file1Table.pageSize)
      },
      file2PageChange(p, ft) {
        this.file2Table.page = p
        this.queryFileList(ft, this.file2Table.page, this.file2Table.pageSize)
      },
      file3PageChange(p, ft) {
        this.file3Table.page = p
        this.queryFileList(ft, this.file3Table.page, this.file3Table.pageSize)
      },
    },
  }
</script>
<style scoped lang="scss">
  .content {
    display: flex;
    .file-item {
      width: 30%;
      margin-right: 3%;
      .title {
        line-height: 30px;
        background-color: #349cfc;
        padding-left: 16px;
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        margin-bottom: 8px;
      }
      .date-input {
        margin-bottom: 8px;
      }
      .table-title {
        color: #349cfc;
        font-weight: 600;
        line-height: 26px;
        display: flex;
        align-items: center;
      }
    }
  }
</style>
